// ChatScreen.qml - 视频聊天主界面
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: chatScreen
    color: "#f8f9fa"  // 设置背景颜色

    // 属性别名，方便外部访问
    property alias messageArea: messageArea
    property alias remoteVideoImage: remoteVideoImage

    // 添加消息到聊天区域
    function appendMessage(message) {
        messageArea.text += message + "\n"
        messageArea.cursorPosition = messageArea.length  // 滚动到底部
    }

    // 远程视频帧处理函数
    function handleRemoteVideoFrame(frame) {
        // 强制刷新图像 - 通过添加时间戳参数避免缓存
        var timestamp = new Date().getTime()
        remoteVideoImage.source = ""
        remoteVideoImage.source = "image://remotevideoprovider/remote?" + timestamp
    }

    // 顶部标题栏
    Rectangle {
        id: header
        width: parent.width
        height: 70
        color: "#4a6fa5"  // 深蓝色标题栏

        RowLayout {
            anchors.fill: parent
            anchors.margins: 15

            // 标题文本
            Text {
                text: qsTr("视频会议 - ") + root.serverIp + ":" + root.serverPort
                font.pixelSize: 18
                font.weight: Font.Bold
                color: "white"
                Layout.alignment: Qt.AlignLeft
            }

            Item { Layout.fillWidth: true }  // 占位元素，用于布局对齐

            // 断开连接按钮
            Button {
                text: qsTr("断开连接")
                font.pixelSize: 14
                padding: 10

                background: Rectangle {
                    radius: 6
                    color: parent.down ? "#e74c3c" : "#c0392b"  // 按下时深红色
                }

                contentItem: Text {
                    text: parent.text
                    font: parent.font
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                onClicked: {
                    videoController.stopVideoChat()      // 停止视频聊天
                    networkManager.stopConnection()      // 断开网络连接
                    root.showStartScreen()               // 返回开始界面
                }
            }
        }
    }

    // 主内容区域
    RowLayout {
        anchors {
            top: header.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 15
        }
        spacing: 20  // 左右区域间距

        // 左侧：视频聊天区域 (占70%宽度)
        ColumnLayout {
            Layout.preferredWidth: parent.width * 0.7
            Layout.fillHeight: true
            spacing: 15

            // 视频聊天标题
            Text {
                text: qsTr("视频")
                font.pixelSize: 18
                font.weight: Font.Bold
                color: "#2c3e50"
                Layout.alignment: Qt.AlignHCenter
            }

            // 远程视频显示区域
            Rectangle {
                id: remoteVideoContainer
                Layout.fillWidth: true
                Layout.preferredHeight: parent.height * 0.6  // 占60%高度
                color: "#ffffff"  // 白色背景
                radius: 12        // 圆角
                border.color: "#e0e0e0"  // 边框颜色
                border.width: 2   // 边框宽度

                // 远程视频标签
                Text {
                    text: qsTr("对方视频")
                    font.pixelSize: 14
                    color: "#7f8c8d"
                    anchors {
                        top: parent.top
                        left: parent.left
                        margins: 15
                    }
                }

                // 远程视频图像显示
                Image {
                    id: remoteVideoImage
                    anchors.fill: parent
                    anchors.margins: 10
                    fillMode: Image.PreserveAspectFit  // 保持宽高比
                    source: "image://remotevideoprovider/remote"  // 视频提供者URL
                    cache: false  // 禁用缓存

                    // 无视频时的提示文本
                    Text {
                        text: qsTr("等待对方视频连接")
                        font.pixelSize: 16
                        color: "#bdc3c7"
                        anchors.centerIn: parent
                        visible: parent.status !== Image.Ready  // 图像未准备好时显示
                    }
                }
            }

            // 本地视频和控制区域
            RowLayout {
                Layout.fillWidth: true
                Layout.preferredHeight: parent.height * 0.3  // 占30%高度
                spacing: 15

                // 本地视频显示区域
                Rectangle {
                    id: localVideoContainer
                    Layout.preferredWidth: parent.width * 0.4  // 占40%宽度
                    Layout.fillHeight: true
                    color: "#ffffff"
                    radius: 12
                    border.color: "#e0e0e0"
                    border.width: 2

                    // 本地视频标签
                    Text {
                        text: qsTr("本地视频")
                        font.pixelSize: 12
                        color: "#7f8c8d"
                        anchors {
                            top: parent.top
                            left: parent.left
                            margins: 10
                        }
                    }

                    // 本地摄像头图像显示
                    Image {
                        id: localVideoImage
                        anchors.fill: parent
                        anchors.margins: 5
                        fillMode: Image.PreserveAspectFit
                        source: videoController.frameId  // 视频控制器的帧ID
                        cache: false

                        // 摄像头未启动时的提示文本
                        Text {
                            text: qsTr("摄像头未启动")
                            font.pixelSize: 12
                            color: "#bdc3c7"
                            anchors.centerIn: parent
                            visible: parent.source.toString().includes("stopped") ||
                                    parent.source.toString().includes("initial")
                        }
                    }
                }

                // 视频控制按钮区域
                GridLayout {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    columns: 2  // 2列网格
                    rowSpacing: 10
                    columnSpacing: 10

                    // 开启摄像头按钮
                    Button {
                        id: startCameraBtn
                        text: qsTr("开启摄像头")
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50
                        font.pixelSize: 12
                        font.weight: Font.Medium

                        background: Rectangle {
                            radius: 8
                            color: parent.down ? "#2980b9" : "#3498db"  // 蓝色按钮
                        }

                        contentItem: Text {
                            text: parent.text
                            font: parent.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        onClicked: {
                            console.log("开启本地摄像头")
                            videoController.startVideoChat()  // 启动视频聊天
                        }
                    }

                    // 关闭摄像头按钮
                    Button {
                        id: stopCameraBtn
                        text: qsTr("关闭摄像头")
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50
                        font.pixelSize: 12
                        font.weight: Font.Medium

                        background: Rectangle {
                            radius: 8
                            color: parent.down ? "#c0392b" : "#e74c3c"  // 红色按钮
                        }

                        contentItem: Text {
                            text: parent.text
                            font: parent.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        onClicked: {
                            console.log("关闭本地摄像头")
                            videoController.stopVideoChat()  // 停止视频聊天
                        }
                    }

                    // 开始视频流按钮
                    Button {
                        id: startVideoBtn
                        text: qsTr("开始视频流")
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50
                        font.pixelSize: 12
                        font.weight: Font.Medium

                        background: Rectangle {
                            radius: 8
                            color: parent.down ? "#27ae60" : "#2ecc71"  // 绿色按钮
                        }

                        contentItem: Text {
                            text: parent.text
                            font: parent.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        onClicked: {
                            console.log("开始视频流")
                            if (networkManager) {
                                networkManager.startVideoStream()  // 开始视频流传输
                                videoController.startVideoChat()   // 启动视频聊天
                            } else {
                                console.error("networkManager is undefined")
                            }
                        }
                    }

                    // 停止视频流按钮
                    Button {
                        id: stopVideoBtn
                        text: qsTr("停止视频流")
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50
                        font.pixelSize: 12
                        font.weight: Font.Medium

                        background: Rectangle {
                            radius: 8
                            color: parent.down ? "#d35400" : "#e67e22"  // 橙色按钮
                        }

                        contentItem: Text {
                            text: parent.text
                            font: parent.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        onClicked: {
                            console.log("停止视频流")
                            if (networkManager) {
                                networkManager.stopVideoStream()  // 停止视频流传输
                                videoController.stopVideoChat()   // 停止视频聊天
                            } else {
                                console.error("networkManager is undefined")
                            }
                        }
                    }
                }
            }
        }

        // 右侧：聊天区域 (占30%宽度)
        ColumnLayout {
            Layout.preferredWidth: parent.width * 0.3
            Layout.fillHeight: true
            spacing: 15

            // 文字聊天标题
            Text {
                text: qsTr("聊天室")
                font.pixelSize: 18
                font.weight: Font.Bold
                color: "#2c3e50"
                Layout.alignment: Qt.AlignHCenter
            }

            // 消息显示区域
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "white"
                radius: 12
                border.color: "#e0e0e0"
                border.width: 2

                // 滚动视图
                ScrollView {
                    anchors.fill: parent
                    anchors.margins: 5
                    clip: true  // 裁剪超出内容

                    // 消息显示文本区域
                    TextArea {
                        id: messageArea
                        readOnly: true        // 只读
                        text: qsTr("欢迎使用视频聊天系统\n")  // 初始欢迎消息
                        wrapMode: Text.Wrap   // 自动换行
                        selectByMouse: true   // 允许鼠标选择文本
                        font.pixelSize: 14
                        color: "#2c3e50"
                        background: null      // 无背景

                        // 无消息时的提示文本
                        Text {
                            text: qsTr("暂无消息")
                            font.pixelSize: 14
                            color: "#bdc3c7"
                            anchors.centerIn: parent
                            visible: parent.text === qsTr("欢迎使用视频聊天系统\n")
                        }
                    }
                }
            }

            // 消息输入区域
            ColumnLayout {
                Layout.fillWidth: true
                spacing: 10

                // 分隔线
                Rectangle {
                    Layout.fillWidth: true
                    height: 1
                    color: "#e0e0e0"
                }

                // 输入行
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 10

                    // 消息输入框
                    TextField {
                        id: messageInput
                        Layout.fillWidth: true
                        placeholderText: qsTr("输入消息...")
                        font.pixelSize: 14
                        onAccepted: sendButton.onClicked()  // 回车键发送
                        padding: 12

                        background: Rectangle {
                            radius: 8
                            border.color: messageInput.activeFocus ? "#3498db" : "#ddd"
                            border.width: messageInput.activeFocus ? 2 : 1
                            color: "white"
                        }
                    }

                    // 发送按钮
                    Button {
                        id: sendButton
                        text: qsTr("发送")
                        font.pixelSize: 14
                        font.weight: Font.Medium
                        Layout.preferredWidth: 80
                        padding: 12

                        background: Rectangle {
                            radius: 8
                            color: sendButton.enabled ? "#3498db" : "#bdc3c7"
                            opacity: sendButton.down ? 0.8 : 1.0
                        }

                        contentItem: Text {
                            text: sendButton.text
                            font: sendButton.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        onClicked: {
                            if (messageInput.text !== "") {
                                root.sendMessage(messageInput.text)  // 发送消息
                                messageArea.text += "我: " + messageInput.text + "\n"  // 本地显示
                                messageInput.text = ""  // 清空输入框
                            }
                        }
                    }
                }
            }
        }
    }

    // 连接VideoController的信号
    Connections {
        target: videoController

        // 状态改变信号处理
        function onStatusChanged(status) {
            appendMessage("系统: " + status)  // 添加状态消息
        }

        // 视频帧捕获信号处理
        function onVideoFrameCaptured(frame) {
            // 如果正在视频流传输，则发送视频帧
            if (networkManager && networkManager.isVideoStreaming) {
                networkManager.sendVideoFrame(frame)
            }
        }
    }

    // 连接NetworkManager的信号
    Connections {
        target: networkManager

        // 视频帧接收信号处理
        function onVideoFrameReceived(frame) {
            console.log("收到视频帧，尺寸:", frame.width + "x" + frame.height)
            handleRemoteVideoFrame(frame)  // 处理远程视频帧
        }

        // 消息接收信号处理
        function onMessageReceived(message) {
            appendMessage(message)  // 添加接收到的消息
        }

        // 错误发生信号处理
        function onErrorOccurred(error) {
            console.log("网络错误:", error)
            appendMessage("网络错误: " + error)  // 添加错误消息
        }
    }

    // 组件完成时初始化
    Component.onCompleted: {
        console.log("聊天屏幕初始化完成")
    }
}
